<!--
 * @Description: 创建订单
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-04-12 21:12:53
 * @FilePath: /yuxiuproweb/src/views/mes/pro/workorder/mods/order/index.vue
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    v-dialogDrag
    :title="title"
    :visible.sync="shows"
    width="800px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="86px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属客户" prop="workorderCode">
            <el-select
              style="width: 100%"
              v-model="form.workorderCode"
              placeholder="请选择订单状态"
            >
              <el-option label="意向" :value="1"> </el-option>
              <el-option label="未核对" :value="2"> </el-option>
              <el-option label="已核对" :value="3"> </el-option>
              <el-option label="加工中" :value="4"> </el-option>
              <el-option label="已发货" :value="5"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="打开状态" prop="workorderCode">
            <el-select
              style="width: 100%"
              v-model="form.workorderCode"
              placeholder="请选择打开状态"
            >
              <el-option label="打开" :value="1"> </el-option>
              <el-option label="关闭" :value="2"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单状态" prop="workorderCode">
            <el-select
              style="width: 100%"
              v-model="form.workorderCode"
              placeholder="请选择订单状态"
            >
              <el-option label="意向" :value="1"> </el-option>
              <el-option label="未核对" :value="2"> </el-option>
              <el-option label="已核对" :value="3"> </el-option>
              <el-option label="加工中" :value="4"> </el-option>
              <el-option label="已发货" :value="5"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="下单日期" prop="requestDate">
            <el-date-picker
              style="width: 100%"
              clearable
              v-model="form.requestDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择下单日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交单日期" prop="requestDate">
            <el-date-picker
              style="width: 100%"
              clearable
              v-model="form.requestDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择交单日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="金额" prop="workorderCode">
            <el-input v-model="form.workorderCode" placeholder="请输入金额" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="workorderCode">
            <el-input
              type="textarea"
              v-model="form.workorderCode"
              placeholder="请输入备注"
              :rows="4"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      form: {
        workorderCode: "",
        requestDate: "",
      },
      // 表单校验
      rules: {
        workorderCode: [
          { required: true, message: "工单编码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    title() {
      return {
        add: "新建订单",
        edit: "修改订单",
      }[this.type];
    },
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  methods: {
    /** 保存按钮 */
    async submitForm() {
      console.log(123);
      //   try {
      //     await this.$refs["form"].validate();
      //     console.log(this.form);
      //   } catch (e) {
      //     console.log(e);
      //   }
    },
  },
};
</script>
